/* 首页样式 */
header {
  background-color: #cf4cff;
  padding: 0rem 1.06666667rem 0rem 1.06666667rem;
  overflow: hidden;
}
header .scan {
  float: left;
  background-image: url("../img/home_scan.png");
  width: 2.13333333rem;
  height: 2.48888889rem;
  background-size: 2.13333333rem, 2.48888889rem;
  margin: 0.28444444rem 0rem 0.28444444rem 0.28444444rem;
}
header form {
  width: 17.77777778rem;
  overflow: hidden;
  float: left;
  border-radius: 0.88888889rem;
  height: 1.77777778rem;
  margin: 0.64rem 1.56444444rem 0.64rem 0.92444444rem;
  background-color: #ffffff;
}
header form input {
  outline: none;
  float: left;
  border: none;
  line-height: 1.77777778rem;
  height: 1.77777778rem;
  width: 15.28888889rem;
  background-color: #ffffff;
  text-indent: 1.35111111rem;
  font-size: 0.92444444rem;
  color: #616161;
}
header form button {
  float: left;
  background: url("../img/home_search_btn_06.png") transparent;
  width: 1.06666667rem;
  height: 1.06666667rem;
  background-size: 1.06666667rem 1.06666667rem;
  border: none;
  margin-top: 0.35555556rem;
}
header .message {
  float: left;
  background-image: url("../img/home_message.png");
  width: 1.49333333rem;
  height: 2.48888889rem;
  background-size: 1.49333333rem, 2.48888889rem;
  margin-top: 0.32rem;
}
.banner {
  width: 26.66666667rem;
  overflow: hidden;
  position: relative;
}
.banner ul {
  position: relative;
  left: 0rem;
  overflow: hidden;
  width: 106.66666667rem;
}
.banner ul li {
  width: 26.66666667rem;
  float: left;
}
.banner ul li img {
  width: 26.66666667rem;
}
.banner ol {
  width: 2.13333333rem;
  height: 0.92444444rem;
  border-radius: 0.46222222rem;
  background-color: #e4e4e4;
  position: absolute;
  left: 11.55555556rem;
  bottom: 0.35555556rem;
  opacity: 0.6;
  padding: 0rem 0.71111111rem 0rem 0.71111111rem;
}
.banner ol li {
  float: left;
  margin-top: 0.24888889rem;
  margin: 0.24888889rem 0.10666667rem 0.24888889rem 0.10666667rem;
  background-image: url("../img/banner_dot1.png");
  width: 0.46222222rem;
  height: 0.46222222rem;
  background-size: 0.46222222rem, 0.46222222rem;
}
.banner ol .on {
  background-image: url("../img/banner_dot2.png");
}
.swiper-container {
  width: 100%;
  position: relative;
}
.swiper-container .swiper-slide {
  width: 100%;
}
.swiper-container .swiper-slide img {
  width: 100%;
}
.swiper-container .swiper-pagination-bullets {
  width: 2.13333333rem;
  height: 0.92444444rem;
  border-radius: 0.46222222rem;
  background-color: #e4e4e4;
  position: absolute;
  left: 11.55555556rem;
  bottom: 0.35555556rem;
  opacity: 0.6;
  padding: 0rem 0.71111111rem 0rem 0.71111111rem;
}
.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet {
  float: left;
  margin-top: 0.24888889rem;
  margin: 0.24888889rem 0.10666667rem 0.24888889rem 0.10666667rem;
  background-image: url("../img/banner_dot1.png");
  width: 0.46222222rem;
  height: 0.46222222rem;
  background-size: 0.46222222rem, 0.46222222rem;
}
.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background-image: url("../img/banner_dot2.png");
}
.nav {
  padding: 1.06666667rem 1.06666667rem 1.06666667rem 1.06666667rem;
  overflow: hidden;
}
.nav li {
  float: left;
  width: 5.33333333rem;
  padding: 0.35555556rem 0rem 0.35555556rem 0rem;
  margin-left: 1.06666667rem;
  background-color: #9f40ff;
  border-radius: 1.28rem;
}
.nav li:nth-of-type(1) {
  margin-left: 0rem;
}
.nav li img {
  width: 2.56rem;
  height: 2.56rem;
  display: block;
  margin: 0 auto;
}
.nav li span {
  display: block;
  width: 5.33333333rem;
  text-align: center;
  color: #ffffff;
  font-size: 0.85333333rem;
  line-height: 0.85333333rem;
  margin-top: 0.35555556rem;
}
.headline {
  padding: 0rem 1.06666667rem 0rem 1.06666667rem;
  background-color: #d666ff;
  position: relative;
}
.headline b {
  display: inline-block;
  padding: 0.64rem 0.64rem 0.64rem 0.64rem;
  text-align: justify;
  width: 2.34666667rem;
  height: 2.34666667rem;
  color: #ffffff;
  font-size: 0.99555556rem;
  line-height: 1.20888889rem;
}
.headline i {
  display: inline-block;
  color: #fcf5ff;
  font-size: 0.71111111rem;
  line-height: 0.85333333rem;
  margin-bottom: 0.64rem;
  margin-left: 0.28444444rem;
}
.headline img {
  width: 8.74666667rem;
  height: 3.91111111rem;
  position: absolute;
  left: 14.22222222rem;
  bottom: 0rem;
}
.middle {
  background-color: #f8e5ff;
  padding: 1.13777778rem 1.06666667rem 0rem 1.06666667rem;
}
.middle .hot {
  width: 24.53333333rem;
  height: 11.34222222rem;
  position: relative;
  background: url("../img/home_hot_bg.png");
  background-size: 24.56888889rem, 11.34222222rem;
}
.middle .hot img {
  position: absolute;
  top: 1.35111111rem;
  right: 1.20888889rem;
  width: 9.70666667rem;
  height: 8.49777778rem;
}
.middle .hot h3 {
  position: absolute;
  top: 0rem;
  left: 0rem;
  float: left;
  border-radius: 0.64rem;
  width: 5.33333333rem;
  line-height: 1.77777778rem;
  background-color: #cf4cff;
  text-align: center;
  color: #ffffff;
  font-size: 0.85333333rem;
}
.middle .hot .titleM {
  position: absolute;
  top: 2.13333333rem;
  left: 2.48888889rem;
  display: block;
  width: 11.37777778rem;
  font-size: 1.13777778rem;
  color: #ffffff;
  line-height: 1.63555556rem;
}
.middle .hot .title {
  font-size: 0.85333333rem;
  font-family: 宋体;
  color: #ebf1f2;
  line-height: 0.85333333rem;
  position: absolute;
  top: 5.90222222rem;
  left: 2.48888889rem;
}
.middle .hot .price {
  position: absolute;
  top: 7.25333333rem;
  left: 2.48888889rem;
  color: #ff3352;
  font-size: 0.85333333rem;
}
.middle .hot .price em {
  font-size: 1.42222222rem;
}
.middle .hot .buy {
  position: absolute;
  bottom: 0.78222222rem;
  left: 2.48888889rem;
  width: 4.33777778rem;
  line-height: 1.42222222rem;
  text-align: center;
  background-color: #ff3352;
  border-radius: 0.42666667rem;
  color: #ffd6dc;
  font-size: 0.85333333rem;
}
.middle .boom,
.middle .new {
  width: 24.53333333rem;
  height: 11.09333333rem;
  border-radius: 1.28rem;
  background: #0aa6ee;
  margin-top: 1.13777778rem;
  position: relative;
}
.middle .boom h3,
.middle .new h3 {
  position: absolute;
  top: 0rem;
  left: 0rem;
  float: left;
  border-radius: 0.64rem;
  width: 5.33333333rem;
  line-height: 1.77777778rem;
  background-color: #cf4cff;
  text-align: center;
  color: #ffffff;
  font-size: 0.85333333rem;
}
.middle .boom img,
.middle .new img {
  position: absolute;
  top: 3.05777778rem;
  left: 2.27555556rem;
  width: 8.35555556rem;
  height: 6.36444444rem;
}
.middle .boom .titleM,
.middle .new .titleM {
  position: absolute;
  left: 12.44444444rem;
  top: 2.13333333rem;
  font-size: 1.13777778rem;
  line-height: 1.56444444rem;
  color: #ffffff;
}
.middle .boom .title,
.middle .new .title {
  font-size: 0.85333333rem;
  font-family: 宋体;
  color: #ebf1f2;
  line-height: 0.85333333rem;
  position: absolute;
  top: 6.04444444rem;
  left: 12.44444444rem;
}
.middle .boom .price,
.middle .new .price {
  position: absolute;
  top: 7.25333333rem;
  left: 12.44444444rem;
  color: #ff3352;
  font-size: 0.85333333rem;
}
.middle .boom .price em,
.middle .new .price em {
  font-size: 1.42222222rem;
}
.middle .boom .buy,
.middle .new .buy {
  position: absolute;
  bottom: 0.35555556rem;
  left: 12.44444444rem;
  width: 4.33777778rem;
  line-height: 1.42222222rem;
  text-align: center;
  background-color: #ff3352;
  border-radius: 0.42666667rem;
  color: #ffd6dc;
  font-size: 0.85333333rem;
}
.middle .new {
  height: 11.23555556rem;
  background: #dd7fff;
}
.middle .new .buy {
  bottom: 0.49777778rem;
}
.middle .new img {
  width: 7.68rem;
  height: 8.24888889rem;
  top: 2.63111111rem;
}
.guess {
  width: 24.53333333rem;
  height: 11.37777778rem;
  margin: 1.63555556rem 1.06666667rem 3.48444444rem 1.06666667rem;
  margin-top: 1.63555556rem;
  background-color: #dd7fff;
  border-radius: 0.78222222rem;
  position: relative;
}
.guess h3 {
  position: absolute;
  top: 0rem;
  left: 0rem;
  float: left;
  border-radius: 0.64rem;
  width: 5.33333333rem;
  line-height: 1.77777778rem;
  background-color: #cf4cff;
  text-align: center;
  color: #ffffff;
  font-size: 0.85333333rem;
}
.guess ul {
  position: absolute;
  overflow: hidden;
  left: 0.92444444rem;
  top: 2.06222222rem;
  width: 22.75555556rem;
}
.guess ul li {
  float: left;
  width: 10.66666667rem;
  background-color: #ffffff;
  padding-bottom: 0.21333333rem;
  margin-left: 1.42222222rem;
}
.guess ul li:nth-of-type(1) {
  margin-left: 0rem;
}
.guess ul li img {
  display: inline-block;
  width: 10.66666667rem;
}
.guess ul li b {
  float: left;
  display: inline-block;
  width: 5.83111111rem;
  text-align: center;
  font-size: 0.85333333rem;
  line-height: 1.42222222rem;
  color: #333333;
}
.guess ul li .buy {
  display: inline-block;
  line-height: 1.42222222rem;
  width: 4.33777778rem;
  color: #ffd6dc;
  font-size: 0.85333333rem;
  text-align: center;
  background-color: #ff3352;
  border-radius: 0.49777778rem;
}
footer {
  background-color: #ebb2ff;
  width: 24.53333333rem;
  display: block;
  height: 3.48444444rem;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0rem 1.06666667rem 0rem 1.06666667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer .option1 i {
  background: url("../img/home_f_index.png") no-repeat;
  width: 1.63555556rem;
  height: 1.63555556rem;
  background-size: 1.63555556rem, 1.63555556rem;
}
footer .option2 i {
  background: url("../img/home_f_class.png") no-repeat;
  background-size: 1.63555556rem, 1.63555556rem;
  width: 1.63555556rem;
  height: 1.63555556rem;
}
footer .option3 i {
  background: url("../img/home_f_shopcart.png") no-repeat;
  background-size: 1.81333333rem, 1.63555556rem;
  width: 1.81333333rem;
  height: 1.63555556rem;
}
footer .option4 i {
  background: url("../img/home_f_user.png") no-repeat;
  background-size: 1.45777778rem, 1.63555556rem;
  width: 1.45777778rem;
  height: 1.63555556rem;
}
footer .option1,
footer .option2,
footer .option3,
footer .option4 {
  float: left;
  width: 2.77333333rem;
  margin-top: 0.28444444rem;
}
footer .option1 i,
footer .option2 i,
footer .option3 i,
footer .option4 i {
  display: block;
  margin: 0 auto;
}
footer .option1 b,
footer .option2 b,
footer .option3 b,
footer .option4 b {
  display: block;
  text-align: center;
  line-height: 0.85333333rem;
  width: 2.77333333rem;
  font-size: 0.71111111rem;
  margin-top: 0.35555556rem;
  color: #333333;
}
